<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	/* http://localhost:8080/logistics/  */
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置当前页面基础路径 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<title>Insert title here</title>
</head>
<body>

	<!-- 
ol : 有序列表 order List
ul : 无序列表 unorder List 
-->
	
	<button onclick="getCheckedNodeData();">获取选中的节点的permissionId值</button>
	
	<ul id="permissionTree" class="ztree"></ul>


	<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

	<script type="text/javascript">
	
		//获取选中节点的数据（权限的id的值）
		function getCheckedNodeData(){
			//获取zTree树对象，注意：不是id选择器，不要在 字符串中加#
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//获取被选中的节点
			var nodes = treeObj.getCheckedNodes(true);
			
			//声明数组封装权限id：permissionId
			
			var permissionIds = [];
			console.log(nodes);
			//循环节点，并获取所有的权限id添加到数组中
			for(var i = 0 ;i<nodes.length;i++){
				
				permissionIds.push(nodes[i].permissionId);
			}
			//数组
			console.log(permissionIds);
			
			//将数组转换成字符串
			var permissionIdsStr1 = permissionIds.toString();
			//var permissionIdsStr2 = permissionIds.join(",");//自定义连接符
			console.log(permissionIdsStr1);
			
			
		}
	
	
		/* zTree的设置对象，如果不写任何配置，就是加载zTree默认配置 */
		var setting = {
			data : {
				simpleData : {
					enable : true,
					/* 设置zTree的id的名称：和权限id保持一致 */
					idKey : "permissionId",
					/* 设置zTree的pId的名称：和权限的父id保持一致 */
					pIdKey : "parentId"
				}
			},
			check : {
				/* 是否显示复选框 */
				enable : true
			},
			/* 异步加载 */
			async : {
				enable : true,
				url : "permission/getAllPermission.do",
				dataFilter: ajaxDataFilter,
			},
			//回调
			callback: {
				//异步加载成功以后
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
			
		};
		//异步加载成功的回调函数
		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
			/* 
				数据回显思路：（修改的已经有的权限需要对应的复选框勾上）
				
				1，获取后台共享的权限
				var permissionIds = "${role.permissionIds}";
				var permissionIds = "49,31,34,35";
				
				2,切割成数组
				var permissionionArr = permissionIds.split(",");
				
				3，循环数组获取灭一个id值
				3.1 调用zTree通过属性的值获取zTree节点的方法
					通过permissionId 的值获取 对应节点
				3.2 让其节点选中
			
			*/
			
			//获取zTree树对象，注意：不是id选择器，不要在 字符串中加#
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//1，获取后台共享的权限字符串	
			var permissionIds = "49,31,34,35";
			//2,切割成数组
			var permissionionArr = permissionIds.split(",");
			
			//3，循环数组获取灭一个id值
			for(var i = 0 ; i<permissionionArr.length; i++){
				//获取具体某一个permissionId
				var permissionId = 	permissionionArr[i];
				//3.1 调用zTree通过属性的值获取zTree节点的方法
					//通过permissionId 的值获取 对应节点
				var node = treeObj.getNodeByParam("permissionId", permissionId, null);
				console.log("要回显的节点：",node);
				//3.2 让其节点选中
				if(node !=null){
					treeObj.checkNode(node, true, false);
				}
				
			}
			
		};
		
		/* 对异步加载的数据进行预处理（zTree还没有渲染之前处理，处理后的数据参与zTree的渲染） */
		function ajaxDataFilter(treeId, parentNode, responseData) {
		    if (responseData) {
		      for(var i =0; i < responseData.length; i++) {
		      	//新增一个open属性，让其渲染zTree的时候展开节点
		    	 responseData[i].open = true;
		      	//把url设置null，防止跳转
		    	 responseData[i].url = null;
		      }
		    }
		    return responseData;
		};
		

		/* 文档初始化jquery执行  */
		$(function() {
			/* 初始化zTree */
			$.fn.zTree.init($("#permissionTree"), setting);
		})
	</script>

</body>
</html>